<template name="home">
	<view class="houseControl">	
		<view class="content">
			<lamp v-if="selected==1"></lamp>
			<air  v-if="selected==2"></air>
			<wind  v-if="selected==3"></wind>
			<movies  v-if="selected==4"></movies>			
		</view>
		<view class="tab-nav">			
			<view class="item">							 	
					<image src="../../static/img/lamp-on.png" v-if="selected==1"></image>
					<image src="../../static/img/lamp-off.png" v-else  @click="control(1)"></image> 
					<text @click="control(1)">灯光</text> 	
			</view>	
			<view class="item">
					<image src="../../static/img/air-on.png"  v-if="selected==2" ></image>
					<image src="../../static/img/air-off.png"  v-else @click="control(2)"></image> 
					<text @click="control(2)">空调</text> 	
			</view>	
			<view class="item">
					<image src="../../static/img/window-on.png" v-if="selected==3" ></image>
					<image src="../../static/img/window-off.png" v-else @click="control(3)"></image> 
					<text @click="control(3)">窗帘</text> 	
			</view>
			<view class="item">
					<image src="../../static/img/movies-on.png" v-if="selected==4"></image>
					<image src="../../static/img/movies-off.png"  @click="control(4)" v-else></image> 
					<text @click="control(4)">影视</text> 	
			</view>
		</view>				
	</view>
</template>
<script>
	import lamp from "../../components/houseControl/lamp.vue";  //灯光组件
	import air from "../../components/houseControl/air.vue";  //空调
	import wind from "../../components/houseControl/window.vue";  //窗帘
	import movies from "../../components/houseControl/movies.vue";  //影视
	export default {
		name:'home',
		 components: {
		        lamp,air,wind,movies		
		    },
		data() {
			return {
				selected:1,	  	
			}
		},
		methods: {
			control(index){				
				this.selected=index;
			},
			getVal(res){
			  		
			  }
		}
	}
</script>
<style  lang="scss">	
.houseControl{
	padding-left: 24upx;
	padding-right: 24upx;
	height: 100%;
	position: relative;	
	background: #fff;
	.tab-nav{
		width: 702rpx;
		height: 130rpx;
		background: white;
		box-shadow: 0px 8rpx 21rpx 0px rgba(0, 0, 0, 0.13);
		border-radius: 65rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		position: fixed;
		left: 24rpx;
		bottom: 180rpx;
		.item{
			display: inline-block;
			flex: 1 1 auto;	
			text-align: center;
			padding-top: 16upx;
			image{
				height:56upx;
				width: 56upx;
			}
			text{
				display: block;
				font-size: 28upx;
				color: #000;				
			}
		}
		
	}
}

</style>
